import React, { memo } from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Row, Col, Card, DatePicker, Tooltip as AntdToopTip } from 'antd';
import numeral from 'numeral';
import moment from 'moment';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import styles from './index.less';

const { MonthPicker } = DatePicker;

const ServiceEmp = memo(({ loading, empData, empMonth, selectMonth, empOrderData }) => (
  <Card
    loading={loading}
    title={
      <span>
        服务人数趋势
        <AntdToopTip
          title="服务人数趋势：按月统计当前用户的在职员工+入职办理中员工。"
          overlayStyle={{ minWidth: 260 }}
        >
          <InfoCircleOutlined style={{ marginLeft: 5, color: 'rgba(0,0,0,.45)', fontSize: 14 }} />
        </AntdToopTip>
      </span>
    }
    extra={
      <MonthPicker
        placeholder="选择月份"
        format="YYYY-MM"
        value={empMonth}
        onChange={selectMonth}
        disabledDate={current => current && current > moment().endOf('day')}
        allowClear={false}
      />
    }
  >
    <div className={styles.salesCard}>
      <Row>
        <Col xl={16} lg={12} md={12} sm={24} xs={24}>
          <div>
            <Chart
              height={400}
              data={empData}
              scale={{
                month: {
                  range: [0, 0.95],
                },
              }}
              forceFit
              style={{ marginTop: 30 }}
            >
              <Legend />
              <Axis name="month" />
              <Axis
                name="num"
                label={{
                  formatter: val => (val && numeral(val).format('0,0')) || 0,
                }}
              />
              <Tooltip
                g2-tooltip={{ backgroundColor: '#595959', color: '#fff' }}
                crosshairs={{
                  type: 'y',
                }}
              />
              <Geom
                type="line"
                position="month*num"
                size={2}
                color="type"
                shape="smooth"
                tooltip={[
                  'type*num',
                  (type, num) => ({
                    name: type,
                    value: (num && numeral(num).format('0,0')) || 0,
                  }),
                ]}
              />
              <Geom
                type="point"
                position="month*num"
                size={4}
                shape="circle"
                color="type"
                style={{
                  stroke: '#fff',
                  lineWidth: 1,
                }}
                tooltip={[
                  'type*num',
                  (type, num) => ({
                    name: type,
                    value: (num && numeral(num).format('0,0')) || 0,
                  }),
                ]}
              />
            </Chart>
          </div>
        </Col>
        <Col xl={8} lg={12} md={12} sm={24} xs={24}>
          <div className={styles.salesRank}>
            <h3 style={{ paddingTop: 16, paddingBottom: 14 }}>客户服务人数排行</h3>
            <ul className={styles.rankingList}>
              {(empOrderData.length &&
                empOrderData.map((item, i) => (
                  <li key={item.custName}>
                    <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
                      {i + 1}
                    </span>
                    <span className={styles.rankingItemTitle} title={item.custName}>
                      {item.custName}
                    </span>
                    <span className={styles.rankingItemValue}>
                      {(item.staNum && numeral(item.staNum).format('0,0')) || 0}
                    </span>
                  </li>
                ))) || <li style={{ marginLeft: 40 }}>暂无数据</li>}
            </ul>
          </div>
        </Col>
      </Row>
    </div>
  </Card>
));

export default ServiceEmp;
